<template>
  <el-dialog
    class="gl_dialog_TitleLine gl_dl_footer"
    width="660px"
    title="上课时间段设置"
    :visible.sync="timeVisible"
    append-to-body
  >
    <div>
      <div class="gl_mb_15">
        <el-button type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="add()">新增时间段</el-button>
        <div v-if="isShow" class="gl_mt_15 gl_pb_5" style="border-bottom: 1px dashed #C0C4CC">
          <el-time-picker
            v-model="classTime"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="HH:mm"
            value-format="HH:mm"
            :clearable="false"
            size="mini"
            style="width:66%;"
            @change="timeChange"
          />
          <div v-if="classTime.length > 0" class="gl_ml_15 gl_dis_ib">
            <el-button type="text" @click="cancelTimeNew()">
              <span class="gl_color_grey">取消</span>
            </el-button>
            <el-button :loading="saveLoading" type="text" @click="saveTime()">
              <span class="gl_color_primary">保存</span>
            </el-button>
          </div>
        </div>
      </div>
      <div v-for="(item, index) in timeList" :key="index" v-loading="loading" class="gl_ml_15">
        <template v-if="!item.isEdit">
          <span class="gl_dis_ib gl_mr_15" style="width: 66%">{{ item.time }}</span>
          <el-button type="text">
            <span class="gl_color_primary" @click="edit(item)">修改</span>
          </el-button>
          <el-button type="text" @click="remove(item.id)">
            <span class="gl_color_error">删除</span>
          </el-button>
        </template>
        <template v-else>
          <el-time-picker
            v-model="classTime"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="HH:mm"
            value-format="HH:mm"
            :clearable="false"
            size="mini"
            style="width:70%;"
            @change="timeChange"
          />
          <div v-if="classTime.length > 0" class="gl_ml_15 gl_dis_ib">
            <el-button type="text" @click="cancelTimeEdit(item)">
              <span class="gl_color_grey">取消</span>
            </el-button>
            <el-button :loading="saveLoading" type="text" @click="saveTime(item, 'edit')">
              <span class="gl_color_primary">保存</span>
            </el-button>
          </div>
        </template>
      </div>
      <div v-if="!timeList.length > 0" class="gl_noData_mockTable">
        <span>暂无数据</span>
      </div>
    </div>
    <div slot="footer">
      <el-button size="mini" type="primary" plain @click="timeVisible = false">关 闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  api_POST_ClubCourseScheduleTime, // 创建
  api_PUT_ClubCourseScheduleTimeId, // 修改
  api_DELETE_ClubCourseScheduleTimeId // 删除
} from '@/extend/api/hallswaggerApi/app.js';
import {
  CreateCourseScheduleTimeInput
} from '@/lib/form/hall/swaggerForm.js';
export default {
  props: {
    timeList: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      timeVisible: false,
      loading: false,
      saveLoading: false,
      isShow: false,
      form: new CreateCourseScheduleTimeInput(),
      classTime: []
    };
  },
  methods: {
    open() {
      this.isShow = false;
      for (let i = 0; i < this.timeList.length; i++) {
        const item = this.timeList[i];
        if (item.isEdit) {
          item.isEdit = false;
          return;
        }
      }
      this.timeVisible = true;
    },
    // 新增
    add() {
      this.isShow = true;
      this.classTime = ['00:00', '23:59'];
      this.form.startHour = 0;
      this.form.startMinute = 0;
      this.form.endHour = 23;
      this.form.endMinute = 59;
      for (let i = 0; i < this.timeList.length; i++) {
        const item = this.timeList[i];
        if (item.isEdit) {
          item.isEdit = false;
          return;
        }
      }
    },
    // 取消 (新建)
    cancelTimeNew() {
      this.isShow = false;
      this.form = new CreateCourseScheduleTimeInput();
    },
    // 取消 (修改)
    cancelTimeEdit(item) {
      item.isEdit = false;
      this.form = new CreateCourseScheduleTimeInput();
    },
    // 修改
    edit(item) {
      this.isShow = false;
      this.classTime[0] = item.time.split('~')[0];
      this.classTime[1] = item.time.split('~')[1];
      this.form.startHour = item.startHour;
      this.form.startMinute = item.startMinute;
      this.form.endHour = item.endHour;
      this.form.endMinute = item.endMinute;
      item.isEdit = true;
      this.timeList.forEach((time) => {
        if (time.id !== item.id) {
          time.isEdit = false;
        }
      });
    },
    // 保存（创建）
    saveTime(item, code) {
      var that = this;
      that.saveLoading = true;
      if (code === 'edit') {
        api_PUT_ClubCourseScheduleTimeId(item.id, that.form).then(res => {
          if (res) {
            item.isEdit = false;
            that.saveLoading = false;
            that.$parent.$parent.getTime();
            that.$message({ type: 'success', message: '修改成功!' });
          }
        }).catch(error => {
          that.saveLoading = false;
          that.$message({ type: 'error', message: error.error.message });
        });
      } else {
        api_POST_ClubCourseScheduleTime(that.form).then(res => {
          if (res) {
            that.isShow = false;
            that.saveLoading = false;
            that.$parent.$parent.getTime();
            that.$message({ type: 'success', message: '创建成功!' });
          }
        }).catch(error => {
          that.saveLoading = false;
          that.$message({ type: 'error', message: error.error.message });
        });
      }
    },
    // 删除
    remove(id) {
      var that = this;
      that.$confirm(`您确定要删除此时间段？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api_DELETE_ClubCourseScheduleTimeId(id).then(res => {
          that.$parent.$parent.getTime();
          that.$message({ type: 'success', message: '删除成功!' });
        }).catch(error => {
          that.$message({ type: 'error', message: '删除失败 ' + error.error.message });
        });
      }).catch(() => {});
    },
    timeChange(val) {
      if (val instanceof Array) {
        this.form.startHour = this.classTime[0].split(':')[0];
        this.form.startMinute = this.classTime[0].split(':')[1];
        this.form.endHour = this.classTime[1].split(':')[0];
        this.form.endMinute = this.classTime[1].split(':')[1];
      } else {
        this.form.startHour = '';
        this.form.startMinute = '';
        this.form.endHour = '';
        this.form.endMinute = '';
      }
    }
  }
};
</script>

<style>

</style>
